<template>
  <view class="setting_pay">
    <view class="con">
      <text class="title">支付设置</text>
      <view class="item">
        <text class="tip">电子卡支付密码</text>
        <view class="res" @click="setPassword"> 
          <input
            type="password"
            v-model="dataForm.phoneNumber"
            placeholder="请输入六位密码"
          />
        </view>
      </view>
      <view class="item">
        <text class="tip">原密码</text>
        <view class="res" @click="setPassword"> 
          <input
            type="password"
            v-model="dataForm.old"
            placeholder="请输入原密码"
          />
        </view>
      </view>
      <view class="item">
        <text class="tip">新密码</text>
        <view class="res" @click="setPassword"> 
          <input
            type="password"
            v-model="dataForm.new"
            placeholder="请输入新密码"
          />
        </view>
      </view>
      <view class="item">
        <text class="tip">免密</text
        ><view class="res">
          <switch checked @change="switchChange" />
          <van-switch v-model="dataForm.checked" size="20px" />
        </view>
      </view>
    </view>
    <!--
    <van-cell-group>
      <van-field v-model="value" label="文本" placeholder="请输入用户名" />
    </van-cell-group>
    <van-password-input
      :value="value"
      info="密码为 6 位数字"
      :error-info="errorInfo"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    -->
<!--    <van-number-keyboard
      v-model="value"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    /> -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        dataForm: {
          name: "",
          sexFlag: "",
          birthday: "", //生日
          mobilePhone: "",
          truckBrand: "", // 车辆品牌
          truckNumber: "", //车牌号
          oilId: "1",
        },
        oilList: [],
        oilIndex:"",
        sexActions: [{
            name: "男",
            value: "1"
          },
          {
            name: "女",
            value: "2"
          },
        ],
        sexIndex: ''
      };
    },
    created() {
      this.getInfo();
      this.getOilList();
    },
    methods: {
      switchChange(e){
        this.dataForm.checked = e.target.value
        console.log(this.dataForm.checked)
      },
      async getInfo() {
        try {
          const infoData = await this.$Request({
            url: "/selectMemberInfo",
            method: "GET",
            data: {
              enterpriseId: this.enterpriseId,
              mobilePhone: this.phoneNumber,
            }
          })

          if (infoData.retCode !== 0) {
            throw new Error(infoData.message);
          }
          this.dataForm = infoData.data
        } catch (error) {
          console.log(error)
        }
      },
      async upInfo() {
        try {
          const infoData = await this.$Request({
            url:"/updateMemberInfo",
            method: "POST",
            data:this.dataForm
          });
          if (infoData.retCode !== 0) {
            throw new Error(infoData.message);
          }
          console.log("更新成功~")
          uni.showToast({
            title: '更新成功',
          })
        } catch (error) {
          console.log(error);
        }
      },
      async getOilList() {
        try {
          console.log(222)
          const oilListData = await this.$Request({
            url: "/selectOilInfoList",
            method: "GET",
            data: {}
          });
          if (oilListData.retCode !== 0) {
            throw new Error(oilListData.message);
          }
          this.oilList = oilListData.data.map(res => {
            return {
              ...res,
              name: res.oilName + "-" + res.oilClass + "-" + res.oilType
            }
          })
        } catch (error) {
          console.log(1, error);
        }
      },
      bindSexPickerChange(e) {
        this.sexIndex = e.detail.value
        this.dataForm.sexFlag = this.sexActions[e.detail.value].value
      },
      bindOilPickerChange(e){
        this.oilIndex = e.detail.value
        this.dataForm.oilId = this.oilList[e.detail.value].oilId
      },
      // onBirthdayConfirm(value) {
      //   let year = value.getFullYear();
      //   let month = +value.getMonth() + 1;
      //   let date = value.getDate();
      //   this.dataForm.birthday = year + '-' + month + '-' + date;
      //   this.birthdayShow = false;
      // },
      bindBirthdayChange(e){
        this.dataForm.birthday = e.detail.value
        this.dataForm = {...this.dataForm}
      },
      // onBirthdayCancel() {
      //   this.birthdayShow = false;
      // },
      // oilIdConfirm(val) {
      //   this.dataForm.oilId = val.oilId;
      //   this.dataForm = {
      //     ...this.dataForm
      //   }
      //   this.oilIdShow = false;
      // },
      translationOilIdToOilName(id) {
        const oil = this.oilList.find(ele => {
          return ele.oilId == id
        })

        if (!oil) {
          return "未设置"
        }
        console.log('oil', oil)

        return oil.oilName + "-" + oil.oilClass + "-" + oil.oilType
      }
    }
  }
</script>

<style lang="scss">
.setting_pay {
  width: 750rpx;
  min-height: 100vh;
  background-color: #f5f6f7;
  padding: 0 29rpx;
  box-sizing: border-box;
  overflow: hidden;

  > .con {
    box-sizing: border-box;
    margin-top: 30rpx;

    .title {
      font-size: 30rpx;
      font-weight: bold;
      line-height: 30rpx;
    }
    .item {
      display: flex;
      justify-content: space-between;
      width: 687rpx;
      height: 87rpx;
      background: #ffffff;
      border-radius: 15rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      align-items: center;
      font-size: 28rpx;
      font-weight: border;
      color: #000000;
      margin-top:30rpx;
      .res {
        input {
          background: none;
          outline: none;
          border: none;
          text-align: right;
        }
      }
    }
  }
}
</style>
